<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入header中 公共导航部分 -->
<head th:replace="header::header-commo(用户登录)">
</head>
<script th:inline="javascript">
    //定义入口函数
    $(function () {
        //1.获取虚拟文件路径
        var basePath = [[${#request.contextPath}]]
        //2.给验证码图片添加点击事件
        $("#showCode").click(function () {
            //改变图片切换src属性 达到切换验证码的效果
            //得到时间戳
            var d = new Date().getTime();
            //this表示图片对象 attr：设置或返回被选元素的属性值。attr(name|properties|key,value|fn)
            $(this).attr("src", basePath + "/captcha?d=" + d);
        });
    });
</script>

<body>
<!--引用公共搜索栏部分-->
<header th:replace="header::header-nav">
</header>
<!--登录区域-->
<div class="container-fluid" style="height:460px;background: url('/img/loginbg.jpg') no-repeat;">
    <div class="row">
        <div class="col-md-7">
        </div>
        <div class="col-md-5">
            <div class="panel panel-default" style="width: 400px; margin-top: 50px;">
                <div class="panel-heading">
                    <h3 class="panel-title">用户登录</h3>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" th:action="@{/user/login}" action="#" method="post">
                        <div class="alert alert-danger alert-dismissible" role="alert" th:if="not ${#strings.isEmpty(error)}">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <span th:text="${error}">用户名或密码错误</span>
                        </div>
                        <div class="form-group">
                            <label for="username" class="col-sm-3 control-label">用户名:</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="username" name="username"
                                       placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-3 control-label">密码:</label>
                            <div class="col-sm-7">
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="请输入密码">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="captcha" class="col-sm-3 control-label">验证码:</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="captcha" name="captcha"
                                       placeholder="请输入验证码">
                            </div>
                            <div class="col-sm-4" style="padding: 0;">
                                <img id="showCode" height="27" width="118" th:src="@{/captcha}" src="/img/code.png"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-10">
                                <div class="checkbox">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="true"/>记住用户名
                                        <a th:href="@{/register}" href="#">注册新用户</a>
                                    </label>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-7">
                                <input class="btn btn-success  btn-block" type="submit" value="登录" name="submit"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<footer th:replace="footer::footer-comm">
</footer>


</body>


</html>